<section class="p-6">
	<div class="container max-w-xl mx-auto">
		<div
			class="flex flex-col items-center w-full p-6 space-y-8 rounded-md lg:h-full lg:p-8"
			[ngClass]="['bg' + contrast, 'text' + defaultInv]"
		>
			<img
				src="https://source.unsplash.com/random/100x100?4"
				alt=""
				class="w-20 h-20 rounded-full bg-gray-500"
			/>
			<blockquote class="max-w-lg text-lg italic font-medium text-center">
				"Et, dignissimos obcaecati. Recusandae praesentium doloribus vitae? Rem unde atque
				mollitia!"
			</blockquote>

			<div class="text-center" [ngClass]="['text' + plainInv]">
				<p>Leroy Jenkins</p>
				<p>CEO of Company Co.</p>
			</div>

			<div class="flex space-x-2">
				<button
					type="button"
					class="w-2 h-2 rounded-full"
					aria-label="Page 1"
					[ngClass]="['bg' + contrastInv]"
				></button>
				<button
					type="button"
					class="w-2 h-2 rounded-full"
					aria-label="Page 2"
					[ngClass]="['bg' + plain]"
				></button>
				<button
					type="button"
					class="w-2 h-2 rounded-full"
					aria-label="Page 3"
					[ngClass]="['bg' + plain]"
				></button>
				<button
					type="button"
					class="w-2 h-2 rounded-full"
					aria-label="Page 4"
					[ngClass]="['bg' + plain]"
				></button>
			</div>
		</div>
	</div>
</section>
